<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/bookstore.css">
  <script src="./lib/juery-3.7.1.js"></script>
  <script>
    function listBook() {
        fetch('./api/book/list')
            .then(response => response.json())
            .then(data => createBookTable(data))
            .catch(error => console.log(error));
        console.log("fetch data")
    }

    function createBookTable(json) {
        var books = json["data"];
        var tbody = $("#books");
        tbody.empty();
        for(var i=0; i<books.length; i++) {
            var b = books[i];
            addBookToTable(b);
        }
    }

    function addBookToTable(b) {
        var tbody = $("#books");
        var tr = $("<tr></tr>");
        tr.append("<td>" + b.id + "</td>");
        tr.append("<td>" + b.name + "</td>");
        tr.append("<td>" + b.author + "</td>");
        tr.append("<td>" + b.price + "</td>");
        tr.append("<td>" + b.description + "</td>");
        tr.append("<td>" + b.publish + "</td>");
        tr.append("<td><img class='book-img-thumbnail' src='./upload/" + b.image + "'></td>");
        tr.append("<td><a href='./book/delete?id=" + b.id + "'>删除</a></td>");
        tr.append("<td><a href='./book/edit?id=" + b.id + "'>修改</a></td>");
        tbody.append(tr);
    }

    function addBook() {
        var name = $("input[name='name']").val();
        var author = $("input[name='author']").val();
        var price = $("input[name='price']").val();
        var description = $("input[name='description']").val();
        var publish = $("input[name='publish']").val();
        var book = {
            "name":name, "author":author, "price": parseFloat(price), "description":description, "publish":publish
        };

        $.post({
            url: "./api/book/add",
            contentType: "application/json",
            data: JSON.stringify(book),
            success: function(response) {
                console.log(response);
                addBookToTable(response.data);
            },
            error: function(xhr, status, error) {
                console.log(error);
            }
        });
    }

  </script>
</head>
<body>

<center>
  <table class='bs'>
    <thead>
    <tr>
      <th>编号</th><th>书名</th><th>作者</th><th>价格</th><th>描述</th><th>发行日期</th><th>图片</th><th></th><th></th>
    </tr>
    </thead>
    <tbody id="books">
    </tbody>
  </table>

  <br><br>
  <!--    <form action="./api/book/add" method="post">-->
  <form id="addBookForm">
    书名：<input type="text" name="name" value="11"><br><br>
    作者：<input type="text" name="author" value="22"><br><br>
    价格：<input type="text" name="price" value="33"><br><br>
    描述：<input type="text" name="description" value="44"><br><br>
    日期：<input type="text" name="publish" value="2024-11-11"><br><br>
    <input type="button" name="submit" value="添加图书" onclick="addBook()"/>
  </form>
</center>

<script>
  $(document).ready(function(){
      listBook();
  });
</script>

</body>
</html>